Skip to content

Add optional redesigned React based web interface - #5393

Open
calvind80 wants to merge 68 commits into
springfall2008:mainfrom
calvind80:feature/modern-web-ui
Open

calvind80 wants to merge 68 commits into
springfall2008:mainfrom
calvind80:feature/modern-web-ui

Conversation

@calvind80

Copy link
Copy Markdown

Summary

Adds an optional modern React interface while preserving the existing Predbat interface as the default.

Setting web_ui: modern in apps.yaml serves the bundled modern interface. If the option is omitted or set to legacy, Predbat continues to use the existing interface.

The new interface includes:

  • Responsive dashboard and energy overview
  • Plan timeline, table, history and debug views
  • Battery, power, cost, rates, solar, savings, degradation, marginal-cost and CO₂ charts
  • Apps configuration editor with schema help and Home Assistant entity autocomplete
  • Tariff helper with reviewable configuration suggestions
  • Entities, logs, compare, annual, discovery, cards, internals and documentation pages
  • Home Assistant ingress navigation and mobile layouts
  • Optional weather effects and configurable Overview integrations
  • PredHeat configuration reuse for weather and heat-pump data

Compatibility

  • The legacy interface remains the default.
  • Users do not need Node.js or Vite. The compiled interface is included in apps/predbat/frontend.zip.
  • Existing apps.yaml configurations remain supported.
  • Modern-only entities and settings are optional.
  • Frontend source remains available under frontend/.

Validation

  • 49 frontend tests passed
  • Frontend lint completed with no errors
  • TypeScript and Vite production build passed
  • Modern frontend bundle generated successfully
  • Focused power-flow and Overview backend tests passed
  • Full Predbat suite: 334 tests passed
  • All pre-commit checks passed
  • Tested through Home Assistant ingress on desktop and mobile

= and others added 30 commits September 26, 2026 09:11
Added instructions for testing the UI in Predbat.
Corrected typo in README regarding editing apps.yaml.
Add dashboard cards and improve plan timeline
= and others added 18 commits October 1, 2026 19:07
- add a responsive Overview page with live household energy flows
- show Predbat actions, grid totals, solar forecast, weather, battery, EV and ASHP data
- add optional weather effects and complete day, night and snow house scenes
- extend the power-flow API and apps schema for Overview entities
- use the configured pv_forecast_today entity for the solar forecast
- add editor autocomplete and documentation for EV and ASHP settings
- remove the superseded detailed power-flow view
- improve startup plan handling and local Apps page routing
- bump the modern UI version to 0.2.0-beta.1
Integrate upstream changes through Predbat v9.3.5 while preserving the modern UI, its API extensions, schema additions and documentation. Use the updated upstream prediction kernels and rebuild the verified modern frontend bundle.
Removed references to test ui repo
Updated the documentation for the Overview page to include new configuration options for ASHP and EV cards, along with examples for YAML configuration.
Moved grid marker to prevent line overlap on smaller displays
Grid text on overview page blended with background in dark mode
@calvind80
calvind80 marked this pull request as ready for review October 10, 2026 07:51
@calvind80 calvind80 changed the title Add optional modern React web interface Add optional redesigned React based web interface Oct 10, 2026
@raldred

raldred commented Oct 10, 2026

Copy link
Copy Markdown
Contributor

Thanks for the PR, Can you share screenshots of the various features of the proposed dashboards?

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants